<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div class="table_content" style="margin-bottom: 1px">
            <el-row :gutter="4">
              <el-form
                :inline="true"
                label-position="left"
                class="demo-form-inline"
                label-width="100px"
              >
                <el-form-item>
                  <el-input
                    class="mr10 sh"
                    v-model="searchDto.keywords"
                    placeholder="请输入关键字"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="search"
                  >
                    查询
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-s-open"
                    type="primary"
                    @click="clear"
                  >
                    重置
                  </el-button>
                </el-form-item>
                <el-form-item class="clear_item-margin-bottom">
                  <el-button
                    type="primary"
                    icon="el-icon-circle-plus"
                    @click="newButton"
                  >
                    新增按钮
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div class="table_content">
            <page-table
              ref="multipleSelection"
              :page-data="buttonList"
              :loading="loading"
              :do-get-page-data="getMenuList"
            >
              <el-table-column
                type="index"
                width="100px"
                align="center"
                label="序号"
              ></el-table-column>
              <el-table-column
                prop="ico"
                label="图标"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <i :class="scope.row.ico"></i>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="按钮名称"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="script"
                label="字段名"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="note"
                label="描述"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="管理"
                width="200"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-edit"
                      @click="editButton(scope.row)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="deleteButton(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </page-table>
            <el-dialog
            :close-on-click-modal="false"
              :visible.sync="showButtonView"
              title="新增/编辑按钮:"
              width="40%"
              @close="fail"
            >
              <el-row>
                <el-col :span="24" class="mt20">
                  <el-form
                    ref="buttonViews"
                    :rules="rules"
                    :model="formInfo"
                    label-width="90px"
                  >
                    <el-form-item label="按钮名称:" prop="name">
                      <el-input
                        placeholder="请输入按钮名称"
                        v-model="formInfo.name"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="图标:" prop="ico">
                      <el-input
                        placeholder="请输入图标"
                        v-model="formInfo.ico"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="字段名:" prop="script">
                      <el-input
                        placeholder="请输入字段名"
                        type="textarea"
                        :rows="3"
                        v-model="formInfo.script"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="描述:" prop="note">
                      <el-input
                        placeholder="请输入描述"
                        type="textarea"
                        :rows="3"
                        v-model="formInfo.note"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="排序:" prop="sort">
                      <el-input-number
                        size="large"
                        v-model="formInfo.sort"
                        :min="0"
                        label="描述文字"
                      ></el-input-number>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <div slot="footer">
                <el-button type="primary" @click="saveButtonView">
                  确认
                </el-button>
                <el-button @click="fail">
                  取消
                </el-button>
              </div>
            </el-dialog>
          </div>
        </el-col>
      </el-card>
    </el-row>
  </section>
</template>
<script>
import { mapGetters } from "vuex";
import Status from "@/libs/status";
export default {
  name: "buttonManage",
  created() {
    this.getMenuList();
  },
  data() {
    return {
      loading: false,
      showButtonView: false,
      searchDto: {
        pageSize: 10,
        pageIndex: "",
        keywords: ""
      },
      rules: {
        name: [{ required: true, message: "请输入按钮名称", trigger: "blur" }],
        ico: [{ required: true, message: "请输入按钮图标", trigger: "blur" }],
        script: [{ required: true, message: "请输入字段名", trigger: "blur" }],
        note: [{ required: true, message: "请输入描述", trigger: "blur" }],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }]
      },
      formInfo: {
        id: "",
        ico: "",
        name: "",
        note: "",
        sort: "",
        script: ""
      }
    };
  },
  computed: {
    ...mapGetters({
      buttonList: "buttonList"
    })
  },
  methods: {
    //  获取菜单
    getMenuList(val) {
      let tem = Object.assign(this.searchDto, val);
      this.$store.dispatch("listButtonUsingPOSTS", tem).then(ret => {
        console.log("pageData", ret.data);
      });
    },
    //新增按钮
    newButton() {
      this.showButtonView = true;
    },
    //关闭弹窗
    fail() {
      this.formInfo = {
        id: "",
        ico: "",
        name: "",
        note: "",
        sort: "",
        script: ""
      };
      this.showButtonView = false;
    },
    //编辑按钮
    editButton(row) {
      this.API.getWorkflowButtonById({ id: row.id }).then(ret => {
        console.log(ret.data);
        this.formInfo = ret.data;
      });
      this.showButtonView = true;
    },
    //保存
    saveButtonView() {
      this.$refs["buttonViews"].validate(valid => {
        if (valid) {
          this.$store
            .dispatch("buttonEditUsingPOSTS", { body: this.formInfo })
            .then(ret => {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              this.getMenuList();
              this.fail();
            });
        } else {
          return false;
        }
      });
    },
    //删除按钮
    deleteButton(row) {
      this.$confirm("确认删除当前按钮?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          this.$store.dispatch("buttonDelUsingPOSTS", tem).then(ret => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getMenuList();
          });
        })
        .catch(() => {});
    },
    //查询
    search() {
      this.getMenuList(1);
    },
    //重置
    clear() {
      this.searchDto = {
        pageIndex: "",
        pageSize: 10,
        keywords: ""
      };
      this.getMenuList(1);
    }
  },
  components: {}
};
</script>

<style scoped></style>
